<template>
  <div class="order-detail">
    <van-nav-bar title="订单详情" left-arrow @click-left="backUp"></van-nav-bar>
    <div class="order-status">{{order.order_state_desc}}</div>
    <section class="contact">
      <van-icon name="location"></van-icon>
      <div class="contact-info">
        <div>
          <p>
            <span class="contact-name">{{address.user_name}}</span>
            <span class="contact-tel">{{address.phone}}</span>
          </p>
          <p class="contact-address">{{address.address}}</p>
        </div>
      </div>
    </section>
    <div
      class="cart-goods-item"
      v-for="item in cartList"
      :key="item.goods_id"
      @click="goodsDetail(item.goods_id)"
    >
      <div class="pd-images">
        <img :src="item.goods_cover" alt />
      </div>
      <div class="pd-info">
        <div class="pd-title">{{item.goods_name}}</div>
        <div class="pd-sku">
          <p class="sku-info">{{item.goods_attr}}</p>
        </div>
        <div class="pd-price">
          <div class="total">
            <span>&yen;</span>
            {{item.goods_price}}
          </div>
          <span class="num">×{{item.goods_num}}</span>
        </div>
      </div>
    </div>
    <section class="order-info">
      <h3>订单信息</h3>
      <p>订单编号：{{order.order_sn}}</p>
      <p>创建时间：{{order.create_time}}</p>
      <p>付款时间：{{order.pay_time}}</p>
      <!-- <p>发货时间：{{order.create_time}}</p> -->
    </section>
    <!-- <section class="recommend">
      <h3>推荐商品</h3>
      <ul class="pro-list">
        <li v-for="item in 4" :key="item">
          <router-link :to="{path:'/goods',params:{ id: item }}">
            <img src="../../assets/1.png" alt />
            <h4>xxxx</h4>
            <p>ccccccc</p>
          </router-link>
        </li>
      </ul>
    </section>-->
    <ul class="order-btn">
      <li v-if="order.order_state == 1" @click="payment(order.order_id)">去付款</li>
      <li v-if="order.order_state == 1" @click="cancelConfirm(order.order_id)">取消订单</li>
      <li v-if="order.order_state == 3" @click="receipt(order.order_id)">确认收货</li>
      <li
        v-if="order.order_state == 3||order.order_state == 4||order.order_state == 6"
        @click="toLogistics(order.order_id)"
      >查看物流</li>
      <li v-if="order.order_state == 4" @click="toPublish(order.order_id)">评价</li>
      <li v-if="order.order_state >= 5" @click="deleteConfirm(order.order_id)">删除</li>
    </ul>
  </div>
</template>
<script>
import { Toast } from "vant";
import api from "@/utils/api";
export default {
  name: "orderdetail",
  [Toast.name]: Toast,
  data() {
    return {
      totalFee: 0,
      cartList: [],
      order: {},
      address: {},
      isLogin: true
    };
  },
  mounted() {
    this.weixinConfig();
    this.getDetail();
  },
  methods: {
    getDetail() {
      this.$axios({
        method: "get",
        url: api.detail,
        params: {
          token: localStorage.getItem("token"),
          order_id: this.$route.query.order_id
        }
      }).then(res => {
        console.log(res);
        this.cartList = res.goods;
        this.order = res.order;
        this.address = res.user_address;
      });
    },
    payment(order_id) {
      this.$axios({
        method: "POST",
        url: api.payment,
        data: this.$qs.stringify({
          token: localStorage.getItem("token"),
          order_id: order_id
        })
      }).then(res => {
        console.log(res);
        this.wxPay(res);
      });
    },
    weixinConfig() {
      this.$axios(api.wxconfig, {
        params: {
          url: encodeURIComponent(location.href.split("#")[0])
        }
      }).then(data => {
        console.log(data);
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: data.appId, // 必填，公众号的唯一标识
          timestamp: data.timestamp, // 必填，生成签名的时间戳
          nonceStr: data.nonceStr, // 必填，生成签名的随机串
          signature: data.signature, // 必填，签名，见附录1
          jsApiList: [
            "chooseWXPay",
            "onMenuShareAppMessage",
            "onMenuShareTimeline"
          ]
        });
      });
    },
    wxPay(data) {
      wx.ready(() => {
        wx.chooseWXPay({
          appId: data.appId,
          timestamp: data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
          nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
          package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
          signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
          paySign: data.paySign, // 支付签名
          success: res => {
            Toast("支付成功");
            this.getDetail();
          },
          cancel: res => {
            Toast("取消支付");
          },
          fail: res => {
            Toast("支付失败");
          }
        });
      });
    },
    cancelConfirm(order_id) {
      this.$dialog
        .confirm({
          title: "取消订单",
          message: "您确定取消订单吗？",
          closeOnClickOverlay: true
        })
        .then(() => {
          this.cancel(order_id);
        })
        .catch(() => {});
    },
    cancel(order_id) {
      this.$axios({
        method: "POST",
        url: api.cancel,
        data: this.$qs.stringify({
          token: localStorage.getItem("token"),
          order_id: order_id
        })
      }).then(res => {
        console.log(res);
        this.getDetail();
      });
    },
    deleteConfirm(order_id) {
      this.$dialog
        .confirm({
          title: "删除订单",
          message: "您确定要删除此订单吗？",
          closeOnClickOverlay: true
        })
        .then(() => {
          this.deleteOrder(order_id);
        })
        .catch(() => {});
    },
    deleteOrder(order_id) {
      this.$axios({
        method: "POST",
        url: api.delete,
        data: this.$qs.stringify({
          token: localStorage.getItem("token"),
          order_id: order_id
        })
      }).then(res => {
        console.log(res);
        this.$router.go(-1);
      });
    },
    receipt(order_id) {
      this.$axios({
        method: "post",
        url: api.receipt,
        data: this.$qs.stringify({
          order_id: order_id,
          token: localStorage.getItem("token")
        })
      }).then(res => {
        console.log(res);
        this.getDetail();
      });
    },
    toLogistics(order_id, shipNumber, com) {
      this.$router.push({
        name: "logistics",
        query: { order_id: order_id }
      });
    },
    toPublish(order_id) {
      this.$router.push({ name: "publish", query: { order_id: order_id } });
    },
    goodsDetail(goods_id) {
      this.$router.push({ name: "goods", query: { goods_id: goods_id } });
    },
    backUp() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="less" scoped>
@import "~style/common.less";
.order-detail {
  .flexbox(flex-start, space-between, column, wrap);
  background-color: @borderColor;
  .order-status {
    // height: 80px;
    background-color: @priColor;
    .font-dpr(14px);
    color: #fff;
    line-height: 80px;
    text-indent: 2em;
  }
  .contact {
    margin-bottom: 10px;
    margin-top: 1px;
    position: relative;
    height: 80px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    background-color: #fff;
    z-index: 999l;
    &::after {
      .underline();
    }
    .van-icon-location {
      color: @secColor;
      .font-dpr(24px);
      margin-right: 15px;
    }
    .contact-info {
      background-color: #fff;
      flex: 1;
      .font-dpr(14px);
      font-weight: 300;
      color: @fontColorP;
      .contact-name {
        .font-dpr(15px);
        font-weight: normal;
        margin-right: 20px;
        font-weight: 600;
      }
      .contact-address {
        .font-dpr(12px);
        .textoverflow();
      }
    }
  }
  .cart-goods-item {
    background-color: #fff;
    // margin-top: 10px;
    // width: 90vw;
    padding: 10px 15px;
    // border: 1px solid #f9f;
    .flexbox(flex-start, center, row, nowrap);
    justify-content: space-between;
    // padding: 5px;
    // border-bottom: 1px solid @borderColor;
    &:last-child {
      border-bottom: none;
    }
    .order-info {
      border: 1px solid red;
      position: relative;
      margin-top: 10px;
      padding: 17px 25px;
      color: @fontColorH3;
      .font-dpr(14px);
      font-weight: normal;
      background-color: #fff;
      &::after {
        position: absolute;
        content: "";
        display: block;
        width: 3px;
        height: 14px;
        left: 15px;
        top: 21px;
        background-color: @priColor;
      }
      p {
        .font-dpr(12px);
        color: @fontColorP;
        font-weight: 300;
        margin-top: 12px;
      }
    }

    .pd-images {
      border: 1px solid @borderColor;
      // border: 1px solid #f0f;

      margin: 0 15px 0 5px;
      flex: 1;
      // max-width: 100px;
      img {
        width: 90px;
        height: 60px;
      }
    }
    .pd-info {
      flex: 3;
      // .flexbox(flex-start, space-between, column, wrap);
      -width: 68% !important;
      // flex: initial;
      // border: 1px solid blue;

      .pd-title {
        position: relative;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        /* autoprefixer: off */
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
        -webkit-line-clamp: 2;

        max-width: 100%;
        .font-dpr(12px);
        color: @fontColorH3;
      }
      .pd-sku {
        padding: 5px 0;
        line-height: 1.5;
        .font-dpr(11px);
        color: @tipColor;
      }
      .pd-price {
        margin-top: 10px;
        .total {
          .font-dpr(14px);
          color: @secColor;
        }
        .flexbox(space-between, center, row, nowrap);
        flex: initial;

        /deep/ .van-stepper {
          // z-index: 999;
          .flexbox(space-between, center, row, nowrap);
          flex: initial;
          border-radius: 2px;
          // border: 1px solid #f0f;
          max-height: 16px;
          width: 2rem;
          .van-stepper__minus,
          .van-stepper__plus {
            border: none;
            max-height: 16px;
            background-color: @bgColor;
          }
          .van-stepper__input {
            border: 1px solid @borderColor;
            // border: 1px solid #f00;
            max-height: 16px;
            background-color: @bgColor;
            // border: none;
            outline: none;
            text-align: center;
            padding: 0;
            min-width: 40%;
            .font-dpr(11px);
          }
          .van-stepper__minus--disabled {
            background-color: @bgColor;
          }
        }
      }
      .num {
        .font-dpr(12px);
      }
    }

    .van-checkbox {
      // border: 1px solid @fontColorH3;
      position: absolute;
      left: 0;
    }
  }
  .order-info {
    position: relative;
    margin-top: 10px;
    padding: 17px 25px 44px;
    color: @fontColorH3;
    .font-dpr(14px);
    font-weight: normal;
    background-color: #fff;
    &::after {
      position: absolute;
      content: "";
      display: block;
      width: 3px;
      height: 14px;
      left: 15px;
      top: 21px;
      background-color: @priColor;
    }
    p {
      .font-dpr(12px);
      color: @fontColorP;
      font-weight: 300;
      margin-top: 12px;
    }
  }
  .recommend {
    background-color: #fff;
    margin-top: 10px;
    h3 {
      text-align: center;
      .font-dpr(14px);
      color: @priColor;
      line-height: 50px;
    }
  }
  .pro-list {
    padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    li {
      flex-basis: 46%;
      background-color: @borderColor;
      // border: 1px solid red;
      text-align: center;
      margin-bottom: 20px;
      border-radius: 12px;
      img {
        max-width: 60%;
        margin: 30px 0;
      }
      h4 {
        .font-dpr(14px);
        color: @fontColorH3;
        line-height: 1.5;
      }
      p {
        .font-dpr(12px);
        color: @secColor;
        line-height: 1;
        margin-bottom: 10px;
      }
    }
  }
  .order-btn {
    // border: 1px solid red;
    position: fixed;
    bottom: 0;
    width: 100vw;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: #fff;
    height: 44px;
    li {
      .font-dpr(12px);
      // border:1Px solid @priColor;
      line-height: 24px;
      height: 24px;
      border-radius: 12px;
      padding: 0 8px;
      margin-right: 10px;
      color: @tipColor;
      &:nth-child(1) {
        color: @priColor;
        border: 1px solid @priColor;
      }
      &:nth-child(2) {
        // color: @tipColor;
        border: 1px solid @tipColor;
      }
      &:last-child {
        color: @tipColor;
        margin-right: 20px;
        border: 1px solid @tipColor;
      }
    }
  }
}
.login-info {
  // margin-top: 40px;
  position: relative;
  z-index: 1;
  background: @bgColor;
  padding: 10px 25px;
  border-top: 1px solid @borderColor;
  .flexbox(flex-start, center, row, nowrap);
  .login {
    border: 1px solid @tipColor;
    color: @tipColor;
    background: transparent;
    width: 60px;
    height: 20px;
    .flexbox(center, center, row, nowrap);
    flex: initial;
    margin-right: 10px;
    border-radius: 2px;
  }
  span {
    color: @tipColor;
  }
}
/deep/ .van-swipe-cell__right {
  // border:1px solid red;
  background-color: @secColor;
  width: 70px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>